基於本身是純前端開發者，偶然看到了 Astro 的特性，被深深吸引，雖然現在有許多靜態網站的產生器，但裡面參雜著各種語言，想要客製化樣式的時後也不好改，且也繁複。而 Astro 採用了一種獨特的結構，將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程式碼可以更加簡潔和清晰。
對我而言，學習曲線低就是讚！

ASTRO 吸引我的點如下：

單一檔案元件

將 HTML、JS 和 CSS 整合在單一檔案中，稱為一個元件。這種結構帶來多項優勢：首先，可讀性和維護性提升，相關程式碼在同一檔案中，更易理解和修改。其次，模組化開發成為可能，元件被分解為較小單位，方便重複使用。再者，樣式、腳本和模板之間的封裝較好，避免全局污染和命名衝突。此外，開發效率提升，使用單一檔案元件可更快速地編寫和測試元件。最後，許多前端框架和工具都支援此結構，例如 Vue.js、React、Angular 等，使其更具彈性和適用性。綜合而言，Astro 的單一檔案元件提供了更優雅、高效的開發方式，使前端開發更加便捷和可持續。

Markdown 渲染

它引入了集合概念，通過定義 frontmatter 字段，確保所有資料都被包括且與預期相符。藉由靜態頁面生成，Astro 可為每篇文章創建靜態頁面，提升性能和 SEO 效果。集合引用讓數據複用變得容易，例如在多個頁面中使用同一作者的數據。Astro 的靈巧功能能快速報錯，幫助開發者找到前提資料錯誤。這種方式簡潔、高效，讓前端開發更便捷且易讀，使數據和內容結合更為強大，讓開發者專注於網站功能和性能。

Astro Island

將網頁視為由靜態和互動式的 UI 組件組成的集合，每個 Island 都是獨立渲染的，就像坐落在靜態 HTML 海面上的島嶼。這種設計使得網站性能得到極大提升，同時也提供了更靈活的開發方式，我可以明確告訴 Astro 哪些 Islands 需要在瀏覽器上執行，並根據需要進行整合。

在未來 30 天裡將會以初學者的角度與各位從認識 Astro 到建置個人 Blog，與大家分享。

本系列文適合有 HTML、CSS、JS 基礎的人觀看，會著重於 Astro 的介紹。
且將會使用 Tailwind CSS 來處理網站樣式。

後記

就在前幾天（8/30），Astro 推出了 v3 版本，它的更新速度快得驚人！所以，這次將直接介紹最新版的 v3！